<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/animate.css" type="text/css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"/>
    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!-- Angular -->
    <script src="vendor/angular/angular.js"></script>
    <style>
        .container {
            display: block;
            height: 50px;
            width: 100%;
        }

        .container .colorcheck {
            height: 40px;
            width: 39px;
            display: inline-block;
            border-radius: 6px;
        }

        .container span:hover {
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="container">
    <span class="colorcheck" style="color:red;">
        <i class="fa fa-check-square fa-3x"
           style="margin-top:-3px"
           aria-hidden="true"></i>

    </span>
    <span class="colorcheck" style="color:grey;">
        <i class="fa fa-check-square fa-3x"
           style="margin-top:-3px"
           aria-hidden="true"></i>

    </span>
    <span class="colorcheck" style="color:blue;">
        <i class="fa fa-check-square fa-3x"
           style="margin-top:-3px"
           aria-hidden="true"></i>

    </span>
    <span class="colorcheck" style="color:green;">
        <i class="fa fa-check-square fa-3x"
           style="margin-top:-3px"
           aria-hidden="true"></i>

    </span>
    <span class="colorcheck" style="background-color:yellow;margin-top:5px">

    </span>
    <span class="colorcheck" style="background-color:orange;margin-top:5px">

    </span>
    <span class="colorcheck" style="background:black;">
       <span style="color:white">
        <i class="fa fa-check-square fa-3x"
           style="margin-top:-3px;margin-left:-1px;"
           aria-hidden="true"></i>
    </span>
    </span>

</div>
</body>
</html>